<template>
  <div class="mid_tab">
    <div
      class="mid_tab_item"
      :class="{ active: activeTab === 1 }"
      @click="emits('changeTab', 1)"
    >
      <p>{{ lang.tab_children_1 }}</p>
      <p>
        <NuxtImg src="/images/ranking/icon-time.png" />
        {{ tab_info_1 }}
      </p>
    </div>
    <div
      class="mid_tab_item"
      :class="{ active: activeTab === 2 }"
      @click="emits('changeTab', 2)"
    >
      <p>{{ lang.tab_children_2 }}</p>
      <p>
        <NuxtImg src="/images/ranking/icon-time.png" />
        {{ tab_info_2 }}
      </p>
    </div>
    <div
      class="mid_tab_item"
      :class="{ active: activeTab === 3 }"
      @click="emits('changeTab', 3)"
    >
      <p>{{ lang.tab_children_3 }}</p>
      <p>
        <NuxtImg src="/images/ranking/icon-jiangpai.png" />
        {{ lang.tab_children_3_intro }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("ranking");
defineProps(["activeTab"]);
const emits = defineEmits(["changeTab"]);

const tab_info_1 = ref("00:31:11");
const tab_info_2 = ref("04d:00:31");
</script>

<style scoped lang="scss">
.mid_tab {
  margin-top: 0.3rem;
  display: flex;
  height: 1.4rem;
  background: #40294f;
}
.mid_tab .mid_tab_item {
  width: 33.3rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.38rem;
  flex-direction: column;
  color: #8b6e8b;
  img {
    transform: translateY(-0.02rem);
    opacity: 0.5;
  }
}
.mid_tab .mid_tab_item p:nth-of-type(2) {
  margin-top: 0.1rem;
  font-size: 0.32rem;
  display: flex;
  align-items: center;
}
.mid_tab .mid_tab_item p:nth-of-type(2) img {
  width: 0.3rem;
  margin-right: 0.05rem;
}
.mid_tab .active {
  background: linear-gradient(0deg, #ff3d9e, #fd66b1);
  color: #fff;
  img {
    opacity: 1;
  }
}
</style>
